<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="uni-list">
		<view class="input-item flex-between">
			<view class="input-label">
				<text class="label-txt">{{label}}</text>
			</view>
			<view class="input-val">
				<text class="label-txt">{{emitVal}}</text>
			</view>
		</view>
		<!-- <uni-popup ref="pickerView" type="bottom" style="z-index: 9999999;">
			<div class="popup-view">
				<div class="popup-view-header">
					<div class="popup-view-cancel" @click="pickerCancel"> 取消 </div>
					<div class="popup-view-confirm" @click="pickerConfirm"> 完成 </div>
				</div>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="pickerValue" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in dataList" :key="index">{{item.presentation}}</view>
					</picker-view-column>
				</picker-view>
			</div>
		</uni-popup> -->
	</view>
</template>


<script>
export default {
	name: 'rhPicker',
	props: {
		label:{
			type: String,
			default: () => {return ''}
		},
		value:{
			type: Object,
			default: () => {return {}}
		},
		placeholder: {
			type: String,
			default: () => {return '请选择所属银行'}
		},
	},
	data() {
		return {
			visible: false,
			emitVal: {},
			indicatorStyle: `height: 68rpx;`,
			dataList: [
				{presentation: '2121', icon: ''},
				{presentation: '2121'},
				{presentation: '2121'}
			],
			pickerValue: [1]
		}
	},
	mounted() {
		// this.$refs.pickerView.open()
	},
	methods: {
		pickerCancel() {
			this.$refs.pickerView.close();
		},
		pickerConfirm() {
			this.$refs.pickerView.close();
		},
		bindChange(e){
			this.selectedData = this.dataList[e.target.value];
		}
	}
}
</script>


<style scoped lang="scss">
.popup-view {
	background-color: #FFFFFF;
	.popup-view-header {
		text-align: center;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #F5F5F5;
		div {
			max-width: 50%;
			height: 100%;
			box-sizing: border-box;
			padding: 0 28rpx;
			font-size: 34rpx;
			line-height: 90rpx;
			&:first-child {
				color: #888888;
			}
			&:last-child {
				color: #007aff;
			}
		}
	}
	.picker-view {
		width: 100%;
		height: 476rpx;
		margin-top: 20rpx;
		.item {
			height: 68rpx !important;
			line-height: 68rpx;
			text-align: center;
			color: #000;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			cursor: pointer;
		}
	}
}
.input-item{
		.input-label{
			display: flex;
			align-items: center;
			.label-txt{
				font-size: 26rpx;
				color: #666;
			}
		}
	}

</style>
